<template>
  <header :style="'background:' + bgColor">
  	<div class="wrapper">
  		<img src="../../static/home/img/QtGlobal.png" alt="Crafty" class="logo" @click="$router.replace('/')">
  		<a class="menu_icon" id="menu_icon" @click="open_header = !open_header"></a>
  		<nav id="nav_menu">
  			<ul>
          <li v-if="open_header"><a><router-link to="/">{{$t('l.home')}}</router-link></a></li>
  				<li><a><router-link to="/trade">{{$t('l.header_1')}}</router-link></a></li>
  				<li><a><router-link to="/future">{{$t('l.header_7')}}</router-link></a></li>
  				<li><a><router-link to="/projectLaunch">{{$t('l.header_27')}}</router-link></a></li>
  				<li><a><router-link to="/activity">{{$t('l.header_8')}}</router-link></a></li>
          <li><a><router-link to="/news">{{$t('l.header_9')}}</router-link></a></li>
          <div class="btns">
            <li class="login-btn" v-if="open_header && !isLogin"><router-link to="/login">{{$t('l.header_13')}}</router-link></li>
            <li class="register-btn" v-if="open_header && !isLogin"><router-link to="/register">{{$t('l.header_12')}}</router-link></li>

            <!-- h5-login-icon -->
            <router-link class="personbtn" to="/personal" v-show="isLogin && open_header">
              <img src="../assets/images/personimg.png">
              <div class="personhead">
                  <div class="infobar">
                    <img class="userlogo" :src="intro.pic" v-if="intro && intro.pic" />
                    <img class="userlogo" v-else src="../assets/images/userlogo.png" />

                  </div>
                  <div class="totalValua">
                    <p>{{$t('l.header_16')}}</p>
                    <span class="showval" v-show="!isshowval"  @click.stop.prevent="isshowval=true">{{$t('l.header_17')}}</span>
                    <h3 v-show="isshowval" @click.stop.prevent="isshowval=false">{{totalBtcValuation}} BTC</h3>
                  </div>
                  <div class="persontab">
                    <router-link class="tabitem" to="/personal">{{$t('l.header_18')}}</router-link>
                  </div>
                  <a class="outlogin" @click.stop.prevent="loginout">{{$t('l.header_20')}}</a>
              </div>
            </router-link>
            <router-link class="personbtn" to="/userMessage" v-show="isLogin && open_header">
              <span class="noticebar">
                <img style="margin-top:14px;" src="../assets/images/notice.png">
                <i v-if="count>0"></i>
              </span>
            </router-link>
            <!-- h5-login-icon -->

          </div>
  			</ul>
  		</nav>
      <div class="rightside fr">
        <div class="language fr" @mouseleave="mouseleave_fn">
          <span @mouseenter="mouseenter_fn">{{currentlang}}<i></i></span>
          <div class="menudrop">
            <a href="javascript:void(0);" class="menudroplink" v-for="item in lang" :key="item.id" @click="changeLangEvent(item.lang,item.name)">{{item.name}}</a>
          </div>
        </div>

        <ul class="social fr">
        	<li class="login-btn" v-show="!isLogin"><router-link to="/login" v-show="!isLogin">{{$t('l.header_13')}}</router-link></li>
        	<li class="register-btn" v-show="!isLogin"><router-link to="/register" v-show="!isLogin">{{$t('l.header_12')}}</router-link></li>
        </ul>

        <!-- PC-login-icon -->
        <router-link class="personbtn personbtn_pc" to="/personal" v-show="isLogin">
          <img src="../assets/images/personimg.png">
          <div class="personhead">
              <div class="infobar">
                <img class="userlogo" :src="intro.pic" v-if="intro && intro.pic" />
                <img class="userlogo" v-else src="../assets/images/userlogo.png" />
                <p><span style="display:inline-block;vertical-align:middle;width:80%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{account}}</span></p>
                <p><a href="#/personal" style="width: 50%;"><span style="display: inline-block; vertical-align: middle; width: 80%; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap;">{{$t('l.header_18')}}</span></a></p>
                <router-link :to="authurl" v-if="verifiedLevel!==0" class="realVerified"></router-link>
                <h2 v-else class="notrealVerified"><i></i>{{$t('l.header_15')}}</h2>
              </div>
              <div class="totalValua">
                <p>{{$t('l.header_16')}}</p>
                <span class="showval" v-show="!isshowval"  @click.stop.prevent="isshowval=true">{{$t('l.header_17')}}</span>
                <h3 v-show="isshowval" @click.stop.prevent="isshowval=false">{{totalBtcValuation}} BTC</h3>
              </div>
             
              <a class="outlogin" @click.stop.prevent="loginout">{{$t('l.header_20')}}</a>
          </div>
        </router-link>
        <router-link class="personbtn personbtn_pc" to="/userMessage" v-show="isLogin">
          <span class="noticebar">
            <img style="margin-top:19px;" src="../assets/images/notice.png">
            <i v-if="count>0"></i>
          </span>
        </router-link>
        <!-- PC -->

      </div>
      <div class="popWraper" v-show="isGame">
        <div class="popInter" style="width:532px;height: 275px;min-height: 0;">
            <div class="popHead">
                <h2>{{$t('l.header_21')}}</h2>
                <i class="close" @click="isGame = false"></i>
            </div>
            <div class="popbody">
                <div class="popcon">
                    <div class="vvbtcurl">
                        <input :placeholder="$t('l.header_22')" v-model="nickName">
                    </div>
                    <div class="btnbox clearfix">
                        <a class="btn allcell cancel fl" style="margin:0 auto;width:190px;" @click="isGame = false">{{$t('l.header_23')}}</a>
                        <a class="btn allcell fr" @click="confirmgame" style="margin:0 auto;width:190px;">{{$t('l.header_24')}}</a>
                    </div>

                </div>
            </div>
        </div>
      </div>

  	</div>
  </header>
</template>

<script>
import {api} from '@/api/api';
export default {
  props: {
    bgColor: {
      type: [String],
      default: 'transparent'
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.usertoken ? true : false;
    }
  },
  data () {
    return {
      open_header: false,
      intro:this.$store.state.userintro,
      account:"",
      verifiedLevel:this.$store.state.userintro?this.$store.state.userintro.verifiedLevel:"",
      authurl:"",
      totalBtcValuation:0,
      isGame:false,
      nickName:'',
      count:0,
      isshowval:false,
      currentlang:'简体中文',
      lang:[
        {name:'简体中文',lang:'zh_CN'},
        // {name:'繁体中文',lang:'zh_TW'},
        {name:'English',lang:'en_US'},
        {name:'Deutsch',lang:'de_DE'},
        {name:'Français',lang:'fr_FR'},
        {name:'Español',lang:'es_ES'},
      ],
      idType:1
    }
  },
  created(){
    if(this.$store.state.usertoken){
        this.baseinfo();
    }
    const lang = localStorage.getItem("c_i18n") && localStorage.getItem("c_i18n").split('_')[0];
    switch(lang) {
      case 'zh': this.currentlang = '简体中文'; break;
      case 'en': this.currentlang = 'English'; break;
      case 'de': this.currentlang = 'Deutsch'; break;
      case 'fr': this.currentlang = 'Français'; break;
      case 'es': this.currentlang = 'Español'; break;
      default: this.currentlang = 'English'
    }
  },
  mounted() {
    // 插入两个js
    const x = document.createElement('script');
    x.type = 'text/javascript';
    x.src = './static/home/js/carouFredSel.js';
    document.body.appendChild(x);

    setTimeout(() => {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = './static/home/js/main.js';
      document.body.appendChild(s);
    }, 100)
  },
  methods:{
    mouseenter_fn() {
      if(document.getElementsByClassName('menudrop')[0].style.display != 'block') {
        document.getElementsByClassName('menudrop')[0].style.display = 'block';
      }
    },
    mouseleave_fn() {
      if(document.getElementsByClassName('menudrop')[0].style.display != 'none') {
        setTimeout(() => {
          document.getElementsByClassName('menudrop')[0].style.display = 'none';
        }, 0)
      }
    },
    changeLangEvent:function(lang,name){
      this.$i18n.locale = lang;
      localStorage.setItem("c_i18n",this.$i18n.locale);
      this.currentlang = name;
      this.$emit("changelang", lang);
    
      document.title = "QtGlobal";
      document.getElementsByClassName('menudrop')[0].style.display = 'none';
    },
    async getUserUnreadCount() {
      let res = await api.getUnreadCount();
      let { code, data, msg } = res.data;
      if (code == 0) {
        this.count = data.count;
      }
    },
    async linkgame(){
      let that = this;
      if(!that.isLogin){
        that.$layer.msg(that.$t('l.header_25'));
        that.$router.push({
            path: "/login"
        });
        return;
      }
      let res = await api.getGameUserInfo();
      if(res.data.code==0){
        if(res.data.data.nickName){
          that.getGameLink();
        }else{
          that.isGame = true;
        }
      }else{
        that.$layer.msg(res.data.msg);
      }
    },
    async getGameLink(){
      let that = this;
      let res = await api.getGameUrl();
      if(res.data.code==0){
        if(res.data.data){
          //window.open(res.data.data);
          const routerUrl = that.$router.resolve({
            path: '/game',
            query: {
              link: res.data.data
            }
          });
          window.open(routerUrl.href, "_blank");
        }
      }
    },
    async confirmgame(){
      let that = this;
      let res = await api.updateNikeName({
        nickName:that.nickName
      });
      if(res.data.code==0){
        if(res.data.data.nickName){
          that.getGameLink();
          that.isGame = false;
        }else{
          that.$layer.msg(that.$t('l.header_26'));
        }

      }
    },
    //登出
    async loginout(){
        let that = this;
        let res = await api.logout()
        if(res.data.code==0){
            localStorage.removeItem("usertoken");
            localStorage.removeItem("userintro");
            that.$store.commit('resetstate');
            that.$router.push({
                path: "/login"
            });
        }else{
            that.$layer.msg(res.data.msg);
        }
    },
    //基本信息
    async baseinfo(){
        let that = this;
        let res = await api.baseinfo()
        if(res.data.code==0){
            that.getUserUnreadCount();
            that.currencyInfo = res.data.data.currencyInfo;
            this.intro = res.data.data.info;
            that.idType = res.data.data.info.idType;
            this.totalBtcValuation = res.data.data.totalBtcValuation;
            if(this.intro.cellPhone!==""){
              this.account = this.intro.cellPhone
            }else{
              this.account = this.intro.email
            }
            if(this.intro.idType==1){
              if(this.intro.verifiedLevel==""){
                this.authurl = "/c1Auth"
              }else{
                this.authurl = "/c2Auth"
              }
            }else{
              if(this.intro.verifiedLevel==""){
                this.authurl = "/c1Auth"
              }else if(this.intro.verifiedLevel==1){
                this.authurl = "/c2Auth"
              }else{
                this.authurl = "/c3Auth"
              }
            }

            localStorage.setItem("userintro",JSON.stringify(this.intro));
            that.$store.commit('changestate');
        }else{
            that.$layer.msg(res.data.msg);
        }
    },
  }
}
</script>

<style lang="less">
.fc-0c1e011d-1 {
  color: transparent;
  width: 42px;
  height: 100px;
  margin: 0 78px 0 0;
  display: block;
  z-index: 99;
  overflow: hidden;
  position: relative;
  flex-grow: 0;
  text-indent: -99999em;
  background-size: contain;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center center;
}
.header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  // padding: 0 40px;
  box-sizing: border-box;
  z-index:99;
  // height:69px;
  border-bottom:1px solid rgba(216,216,216,0.23);
  // background: #fff;
  border-bottom-color: transparent;
  // height:48px;
  border-bottom: none;
  .logo{
    padding-right:5px;
    height: 70px;
    line-height: 70px;
    height: 48px;
    line-height: 48px;
    img{
      vertical-align: middle;
      max-height: 80%;
    }
  }
  .menulist{
    li{
      float:left;
      margin-right:40px;
      font-size:15px;
      color:#fff;
      font-weight:bold;
      line-height:69px;
      position:relative;
      cursor:pointer;
      line-height:48px;
      color:#33385e;
      a{
        height: 100px;
        line-height: 100px;
        font-weight: 700;
        color:#fff;
        // color:#33385e;
      }
      &.active{
        // border-bottom:3px solid #fff;
      }
      i{
          display: inline-block;
          vertical-align: middle;
          width: 0px;
          height: 0px;
          border-top: 4px solid #33385e;
          border-right: 4px solid transparent;
          border-left: 4px solid transparent;
          margin-left: 5px;
      }
      &:hover{
        color: #2D8DFE;
        .menudrop{display:block;}
      }
      .menudrop{
        z-index: 999;
        display:none;
        position:absolute;
        width:120px;
        left:50%;
        margin-left:-60px;
        border-radius:4px;
        overflow:hidden;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
        .menudroplink{
          display:block;
          height:49px;
          line-height:49px;
          text-align:center;
          font-size:14px;
          color:#626788;
          position:relative;
          &:after{
            content:"";
            position:absolute;
            bottom:0;
            left:18px;
            width:80px;
            height:1px;
            background:#ECF0F5;
          }
          &:hover{
            background:#ECF0F5;
            color:#2D8DFE;
          }
        }
      }
    }
  }

}

// 头部rightSide
.rightside{
    margin-top: 20px;

    .language{
      box-sizing:border-box;
      height:70px;
      position:relative;
      padding-top: 23px;
      height: 48px;
      span{
        font-size:14px;
        color:#fff;
        // color: #33385e;
        line-height:100%;
        font-weight:400;
        cursor:pointer;
        i{
          display:inline-block;
          vertical-align: middle;
          width:0px;
          height:0px;
          border-top: 4px solid #33385e;
          border-right: 4px solid transparent;
          border-left: 4px solid transparent;
          margin-left:5px;
        }
      }
      .menudrop{
        display:none;
        position:absolute;
        width:120px;
        left:50%;
        top:48px;
        margin-left:-60px;
        border-radius:4px;
        overflow:hidden;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);

        .menudroplink{
          display:block;
          height:49px;
          line-height:49px;
          text-align:center;
          font-size:14px;
          color:#626788;
          position:relative;
          &:after{
            content:"";
            position:absolute;
            bottom:0;
            left:18px;
            width:80px;
            height:1px;
            background:#ECF0F5;
          }
          &:hover{
            background:#ECF0F5;
            color:#2D8DFE;
          }
        }
      }
    }
    .register {
      color: #5741d9!important;
      background: #FFFFFF!important;
    }
    .accountbtn{
      padding: 0 20px;
      height: 28px;
      border-radius: 4px;
      box-sizing: border-box;
      border-radius: 30px;
      border: 2px solid #FFFFFF;
      cursor: pointer;
      font-size: 14px;
      line-height: 26px;
      font-weight: 600;
      text-align: center;
      margin-right: 14px;
      margin-top: 10px;
      color: #FFFFFF;
      &:hover{
        opacity: .8;
      }
    }

    .personbtn{
      float:right;
      position:relative;
      margin-right:20px;
      height:48px;
      .noticebar{
        position:relative;
        i{
          position:absolute;
          top: -4px;
          right: 0;
          width:5px;
          height:5px;
          border-radius: 50%;
          background:#EF5756;
        }
      }
      &>img{
        margin-top:20px;
      }
      &:hover{
        .personhead{display:block;    top: 48px;}
      }
    }
  }
</style>
